<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
		body{
			margin:0;
			padding:0;
		}		
		#main{
			border:1px dotted #ff0000;
			width:500px;
			margin:50px;
		}		
		#container{
			width:400px;
			height:400px;
			position:absolute;
			left:200px;
			top:100px;
			
			border:1px dotted #ff0000;
		}
		#rect{
			padding:10px;
			margin:10px;
			width:120px;
			height:100px;
			border:10px solid #ff0000;
			background-color:#FFFFFF;
			position:absolute;
			
			left:100px;
			top:100px;
			cursor:move;
			resize:both;
			-moz-resize:both;
			overflow:auto;
			min-width:100px;
			min-height:100px;
			max-width:300px;
			max-height:300px;
		
			-webkit-user-select:none;
		}		
		#info{		
			border:1px solid #ff0000;
			position:absolute;
			left:650px;
			background-color:#FFFFFF;		
		}
	
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script>
	
	var rect;
	var container;
	var info;
	var nSW = 5;
	
	function jq(){
		rect = $("#rect");
		info = $("#info");
		container = $("container");
		
		showInfo();
		rect.bind("mousedown",on_DownRect);
		rect.bind("dragend",on_DragEnd);
		
	}
	
	function showInfo(){
		var strInfo="";
		strInfo		="rect.position().left, offsetLeft = "+rect.position().left+" -->offsetParent 기준<br>";
		strInfo		+="rect.position().top, offsetTop = "+rect.position().top+" -->offsetParent 기준<br>";
		strInfo		+="rect.outWidth(), offsetWidth = "+rect.outerWidth()+" -->margin 제외, 보더,패딩,스크롤바 포함<br>";
		strInfo		+="rect.outHeight(), offsetHeight = "+rect.outerHeight()+" -->margin 제외, 보더,패딩,스크롤바 포함<br>";
		strInfo		+="rect.innerWidth() = "+rect.innerWidth()+"  -->패딩포함<br>";
		strInfo		+="rect.innerHeight()= "+rect.innerHeight()+"  -->패딩포함<br>";
		
		strInfo		+="rect.width() = "+rect.width()+"  -->스크롤 포함<br>";
		strInfo		+="rect.height() = "+rect.height()+" -->스크롤포함<br>";
		//strInfo		+="clientTop = _<br>";
		//strInfo		+="clientLeift = _<br>";
		//strInfo		+="clientWidth = _<br>";
		//strInfo		+="clientHeight = _<br>";
		
		
		strInfo		+="rect.scrollLeft(), scrollLeft = "+rect.scrollLeft()+"<br>";
		strInfo		+="rect.scrollTop(), scrollTop = "+rect.scrollTop()+"<br>";
		
		//strInfo		+="scrollWidth = <br>";
		//strInfo		+="scrollHeight = <br>";
		//strInfo		+="clientRect.width = <br>";
		//strInfo		+="clientRect.height = <br>";
		strInfo		+="rect.offset().top, clientRect.top = "+rect.offset().top+" -->document 기준 y<br>";
		//strInfo		+="clientRect.right = _<br>";
		//strInfo		+="clientRect.bottom = _<br>";
		strInfo		+="rect.offset().left, clientRect.left = "+rect.offset().left+" -->document기준 x<br><br>";	
		strInfo		+="window.width() = "+$(window).width()+"<br>";	
		strInfo		+="window.height() = "+$(window).height()+"<br>";	
		strInfo		+="document.width() = "+$(document).width()+"<br>";	
		strInfo		+="document.width() = "+$(document).height()+"<br>";
		info.html(strInfo);
	}
	
	function on_Change(){
		showInfo();
	}
	
	function on_DragEnd(){
		showInfo();
	}
	
	var nStartX = 0;
	var nStartY = 0;
	function on_DownRect(e){
		nStartX	= e.offsetX;
		nStartY	= e.offsetY;	
		window.onmousemove=on_MoveRect;
		window.onmouseup=on_UpRect;
				
	}
	
	function on_UpRect(e){
		window.onmousemove = null;
		window.onmouseup = null;		
	}
	
	function on_MoveRect(e){	
		
		rect.css("left", (e.clientX-nStartX-211));
		rect.css("top", (e.clientY-nStartY-111));	
		showInfo();	
	}
	
	window.onload=function(e){
		jq();
	}
	</script>
</head>
<body>
<div id="container">container
		<div id="rect"> 
			rect1<br>
			2<br>    
			3<br>    
			4<br>    
			5<br>    
			6<br>    
			7<br>    
			8<br>    
			9<br>    
			10<br>    
			11<br>    
			12<br>                  
		</div>
</div>
	<div id="info"> 
    </div>
</body>
</html>